// 新增簿记页面
import React from 'react';
import { connect } from 'dva';
import { FirstHeaderC, NoDataMaskC } from '../../../../comps';
import { Spin } from 'antd';
import mystyle from './index.less';
import accounting from 'accounting';
import moment from 'moment';

class outSourcingInfo extends React.Component {
  state = {
    info: {}, //委外信息
    assetTypeList: [],
    fundActualInvestList: [],
    zjUseHyList: [],
  };

  componentDidMount() {
    const {
      globalM: {
        dataDictionary: { BAXX_ZCLB = [], fundActualInvest = [], GJTJJHYFLI = [] },
      },
    } = this.props;
    this.getInfo(this.props);
    this.setState({
      assetTypeList: BAXX_ZCLB || [],
      fundActualInvestList: fundActualInvest || [],
      zjUseHyList: GJTJJHYFLI || [],
    });
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { tradingId } = this.props;
    if (tradingId != nextProps.tradingId) {
      if (nextProps.tradingId) {
        this.setState(
          {
            info: {},
          },
          () => {
            this.getInfo(nextProps);
          },
        );
      } else {
        this.setState({
          info: {},
        });
      }
    }
  }

  //获取数据
  getInfo = (obj) => {
    const { dispatch } = this.props;
    const { tradingId } = obj;
    // console.log(tradingId)
    if (!tradingId) return;
    dispatch({
      type: 'OutSourcingOrderM/queryAssetsInfo',
      payload: {
        id: tradingId,
      },
      callback: (type, data) => {
        if (type == 'success') {
          this.setState({
            info: data,
          });
          this.props.onChange({
            fundPlanSetupDate: data?.investPlanSetupDate,
            fundPlanTerminateDate: data?.investPlanTerminateDate,
          });
        } else {
          this.setState({
            info: {},
          });
          this.props.onChange({
            fundPlanSetupDate: undefined,
            fundPlanTerminateDate: undefined,
          });
        }
      },
    });
  };

  //格式化数据
  formatData = (value, unit, number) => {
    if (value == undefined || value == null) {
      return '--';
    } else {
      return accounting.formatNumber(value, number) + unit;
    }
  };
  render() {
    const { loading, tradingId } = this.props;
    const { info, assetTypeList, fundActualInvestList, zjUseHyList } = this.state;

    const list = [
      {
        title: '资产类别',
        value: info.assetType ? assetTypeList?.filter((i) => i.code == info.assetType)[0]?.value : '--',
      },
      {
        title: '委外资产编号',
        value: info.outsourcedAssetNum || '--',
      },
      {
        title: '金额',
        value: this.formatData(info.money, '元', 2),
      },
      {
        title: '成立日期',
        value: info.investPlanSetupDate ? moment(info.investPlanSetupDate).format('YYYY-MM-DD') : '--',
      },
      {
        title: '终止日期',
        value: info.investPlanTerminateDate ? moment(info.investPlanTerminateDate).format('YYYY-MM-DD') : '--',
      },
      {
        title: '资金实际投向',
        value: info.fundActualInvest ? fundActualInvestList?.filter((i) => i.code == info.fundActualInvest)[0]?.value : '--',
      },
      {
        title: '资金运用行业',
        value: info.fundUseIndustry
          ? zjUseHyList.reduce((preValue, currentValue) => {
              const t = currentValue?.children?.filter((i) => i.code == info.fundUseIndustry)[0]?.value;
              if (t) return t;
              return preValue;
            }, '--')
          : '--',
      },

      {
        title: '管理人',
        value: info.manager || '--',
      },
      {
        title: '托管人',
        value: info.trustee || '--',
      },
    ];
    return (
      <div>
        <FirstHeaderC title={'基础信息'} />
        <Spin spinning={loading.effects['OutSourcingOrderM/queryAssetsInfo'] == true}>
          <div className={mystyle.wrapper}>
            <div className={mystyle.content}>
              {list.map((item) => {
                return (
                  <div className={mystyle.itemRow}>
                    <div>{item.title}</div>
                    <div title={item.value}>{item.value}</div>
                  </div>
                );
              })}
            </div>
            {!tradingId ? <NoDataMaskC height={'373px'} title={'请选择证券代码，加载数据！'} /> : null}
          </div>
        </Spin>
      </div>
    );
  }
}

export default connect(({ OutSourcingOrderM, loading, globalM }) => ({ OutSourcingOrderM, loading, globalM }))(outSourcingInfo);
